/**
 * Created by helin3 on 2017/12/07.
 */
define([
  './themes/lang/' + window.YUFP_SYS_CONFIG.language + '/pages/example/template/queryNestedTable.js'
], function (require, exports) {
  exports.ready = function (hashCode, data, cite) {
    yufp.lookup.reg('NATIONALITY,PUBLISH_STATUS');
    var vm = yufp.custom.vue({
      el: '#query_nested_table',
      data: function () {
        var me = this;
        return {
          queryFields: [
            {placeholder: this.$t('queryNestedTable.bt'), field: 'id', type: 'input'},
            {placeholder: this.$t('queryNestedTable.lx'), field: 'type', type: 'select', dataCode: 'NATIONALITY'},
            {placeholder: this.$t('queryNestedTable.zz'), field: 'author', type: 'input'}
          ],
          dataUrl: '/trade/example/list',
          tableColumns: [
            { type: 'expand',
              template: function () {
                return '<template scope="props">\
                                <el-table-x :max-height="200" data-url="/trade/example/list" \
                                :table-columns="[\
                                  { label: \'编码\', prop: \'id\' },\
                                  { label: \'名称\', prop: \'title\'},\
                                  { label: \'作者\', prop: \'author\'}\
                                ]"></el-table-x>\
                            </template>';
              } },
            {label: this.$t('queryNestedTable.bm'), prop: 'id'},
            { label: this.$t('queryNestedTable.mc'),
              prop: 'title',
              width: 260,
              sortable: true,
              resizable: true,
              template: function () {
                // 自定义渲染模板,里面的内容可以是原生HTML或element-ui，此处暂且仅支持事件监听，至于格式化内容请参考formatter方法
                // 关于如何配置click事件方法，
                // 1、固定写法：_$event('custom-row-click', scope) ，其中custom-row-click是用于在组件内部触发事件方法，scope是传递的参数
                // 2、在el-table-x组件上通过配置监听：@custom-row-click="customRowClick" ，其中customRowClick是当前业务功能接收事件处理的方法
                return '<template scope="scope">\
                                    <a href="javascipt:void(0);" style="text-decoration:underline;" @click="_$event(\'custom-row-click\', scope)">{{ scope.row.title }}</a>\
                                </template>';
              }
            },
            {label: this.$t('queryNestedTable.lx'), prop: 'type', width: 110, dataCode: 'NATIONALITY'},
            {label: this.$t('queryNestedTable.zz'), prop: 'author', width: 110},
            {label: this.$t('queryNestedTable.shr'), prop: 'auditor', width: 110},
            {label: this.$t('queryNestedTable.yds'), prop: 'pageviews', width: 100},
            { label: this.$t('queryNestedTable.cz'),
              width: 86,
              template: function () {
                return '<template scope="scope">\
                                <el-button type="text" size="small" @click="_$event(\'custom-row-op\', scope, \'edit\')">编辑</el-button>\
                                <el-button type="text" size="small" @click="_$event(\'custom-row-op\', scope, \'delete\')">删除</el-button>\
                            </template>';
              } }
          ]
        };
      },
      methods: {
        createFn: function () {
          this.$alert(this.$t('queryNestedTable.xz'), this.$t('queryNestedTable.ts'));
        },
        editFn: function () {
          this.$alert(this.$t('queryNestedTable.xg'), this.$t('queryNestedTable.ts'));
        },
        detailFn: function () {
          this.$alert(this.$t('queryNestedTable.xq'), this.$t('queryNestedTable.ts'));
        },
        deleteFn: function () {
          this.$alert(this.$t('queryNestedTable.sc'), this.$t('queryNestedTable.ts'));
        },
        customRowClick: function (scope) {
          // 当前行号：scope.$index
          // 当前行数据：scope.row
          // 当前列对象：scope.column
          this.$alert(this.$t('queryNestedTable.nxzdxzw') + scope.row.id, this.$t('queryNestedTable.ts'));
        },
        customRowOp: function (scope, op) {
          // 当前行号：scope.$index
          // 当前行数据：scope.row
          // 当前列对象：scope.column
          this.$alert(this.$t('queryNestedTable.nxzzzcz') + op + this.$t('queryNestedTable.dqxzw') + scope.row.id, this.$t('queryNestedTable.ts'));
        }
      },
      mounted: function () {
        var me = this;
        yufp.lookup.bind('NATIONALITY', function (data) {
          me.typeOptions = data;
        });
      }
    });
  };
});
